<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    dataSource: any[]
  }>(),
  {
    dataSource: () => [],
  },
)

const emit = defineEmits(['click', 'tagClick'])

const handleTag = (cardItem: any) => {
  console.log('tag', cardItem)
}
</script>

<template>
  <div class="home-hot-component">
    <div class="card-container">
      <div
        v-for="item in props.dataSource"
        :class="[item.active ? 'card-item-active' : 'card-item']"
        :key="item.id"
        :style="[
          item.active && {
            backgroundImage:
              item.backColor ||
              'linear-gradient(rgb(235, 119, 48), rgb(224, 69, 157))',
          },
        ]"
        @click="emit('click', item)"
      >
        <ElPopover
          popper-class="home-hot-popover"
          placement="bottom-start"
          trigger="hover"
          :width="200"
          :show-arrow="false"
        >
          <template #reference>
            <!-- 防止用户误点击 -->
            <div class="home-card-setting" @click.stop>
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.057 12.015c0-.423-.15-.78-.45-1.074-.3-.294-.664-.441-1.092-.441-.416 0-.773.147-1.07.44A1.454 1.454 0 0 0 5 12.016c0 .281.069.535.207.762.137.226.32.407.55.541.23.135.482.202.758.202a1.545 1.545 0 0 0 1.336-.744c.137-.226.206-.48.206-.761Zm5.453 0c0-.423-.147-.78-.44-1.074a1.462 1.462 0 0 0-1.075-.441c-.416 0-.77.147-1.064.44-.294.294-.441.652-.441 1.075 0 .281.067.535.202.762.134.226.316.407.546.541.23.135.482.202.757.202.282 0 .538-.067.767-.202.23-.134.412-.315.546-.541.135-.227.202-.48.202-.762Zm5.49 0c0-.423-.148-.78-.445-1.074a1.466 1.466 0 0 0-1.07-.441c-.428 0-.792.147-1.092.44-.3.294-.45.652-.45 1.075 0 .281.069.535.207.762a1.546 1.546 0 0 0 1.335.743c.276 0 .528-.067.758-.202.23-.134.413-.315.55-.541.138-.227.207-.48.207-.762Z"
                ></path>
              </svg>
            </div>
          </template>
          <div class="home-hot-popover-slot">
            <div
              class="home-hot-popover-slot-item"
              @click.stop="handleTag(item)"
              v-if="!item.isLove"
            >
              收藏
            </div>
            <div
              class="home-hot-popover-slot-item"
              @click.stop="handleTag(item)"
              v-else="item.isLove"
            >
              取消收藏
            </div>
          </div>
        </ElPopover>

        <div class="home-card-start" v-show="item.isLove">
          <SvgIcon name="start" size="20" color="#fff" />
        </div>

        <div class="home-card-content">
          <div class="home-cont-head">
            <span class="c-one-hidden">
              {{ item.head }}
            </span>
          </div>
          <div class="home-line"></div>
          <div class="home-cont-t">
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use './index.scss';
</style>
